<template>
    <div class="class-div">
        <label for="班级信息" style="width: 20%;white-space: nowrap;">班级：</label>
        <el-row class="class-list" style="width: 80%; margin-left: 10px; margin-right: 10px;">
            <el-select v-model="choiseValue" value-key="id" placeholder="Select" @change="getNodes">
                <el-option v-if="role=='0'" v-for="item in getClassInfo" :key="item.id" :label="item.className" :value="item">
                    <span style="float: left">{{ item.className }}</span>
                    <span style="
            float: right;
            color: var(--el-text-color-secondary);
            font-size: 13px;
            ">
                    </span>
                </el-option>
                <el-option v-else v-for="item in studentClassInfo" :key="item.id" :label="item.className" :value="item">
                    <span style="float: left">{{ item.className }}</span>
                    <span style="
            float: right;
            color: var(--el-text-color-secondary);
            font-size: 13px;
            ">
                    </span>
                </el-option>
            </el-select>
            <!-- <el-menu default-active="2" class="class-list" @open="handleOpen" @close="handleClose">
            <el-menu-item v-for="(item, index) in getClassInfo" :key="index" :index="index" @click="getNodes(item)">
                {{ item.className }}
            </el-menu-item>
        </el-menu> -->
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { teacherclass } from '@/stores/teacherclass'
import { storeToRefs } from 'pinia';
import { onMounted, ref } from 'vue'
import { storeInfo } from '@/stores/storeinfo';
import { useUserStore } from '@/stores/userStore';
import { studentClass } from '@/stores/studentClass';
const userId = useUserStore().user.id;
const teacherclassStore = teacherclass();
const studentClassStore = studentClass();
const { getClassInfo } = storeToRefs(teacherclassStore);
const {studentClassInfo} =storeToRefs(studentClassStore)
const choiseValue = ref('');//班级信息
//获取当前登录的用户权限：
const role = useUserStore().user.role;
//根据role不同发起不同的请求
onMounted(async () => {
    if(role=='0'){
        await teacherclassStore.getTeacherClassById(userId)
    }else{
        await studentClassStore.getStudentClassById(userId)
    }
    
})
const toFile = storeInfo();
const getNodes = (item: any) => {
    toFile.setSharedData(item);
}

</script>
<style scoped>
/* 修改菜单项高度 */
.class-list :deep(.el-menu-item),
.class-list :deep(.el-sub-menu__title) {
    height: 25px;
    /* 设置为你想要的高度 */
    line-height: 25px;
    /* 保持与高度一致以确保垂直居中 */
}

.class-div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.class-list {
    width: 100%;
}

/* 菜单项文本自动换行 */
.el-menu-item span,
.el-sub-menu__title span {
    white-space: normal;
    word-break: break-word;
}
</style>